{% load static %}
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>仓储管理系统</title>
    <!-- Bootstrap 5 CSS -->
    <link href="{% static 'plugins/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css' %}" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
    <style>
        .feature-card {
            transition: transform 0.3s ease;
            border: none;
            border-radius: 15px;
            min-height: 280px;
        }
        .feature-card:hover {
            transform: translateY(-8px);
        }
        .hero-section {
            background: linear-gradient(135deg, #6366f1 0%, #2563eb 100%);
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
        .feature-icon {
            width: 80px;
            height: 80px;
            background: #e0e7ff;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
        }
        .btn-purple {
        background-color: #6f42c1; /* 紫色背景 */
        color: white;
        border: 2px solid #6f42c1; /* 紫色边框 */
        transition: all 0.3s ease;
    }

    .btn-purple:hover {
        background-color: #5a32a3; /* 深一点的紫色 */
        border-color: #5a32a3;     /* 边框也变深 */
        color: white;
    }
    </style>
</head>
<body class="bg-light">
    <nav class="navbar navbar-expand-lg bg-dark border-bottom border-dark">
        <div class="container">
            <a class="navbar-brand d-flex align-items-center" href="/">
                <img src="{% static 'img/小房子.png' %}" alt="Logo" width="40" height="40">
                <span class="ms-2 fs-5 fw-bold text-white">仓储管理系统</span>
            </a>
        </div>
    </nav>

    <main class="container my-5">
        <div class="hero-section text-center text-white py-5 mb-5">
            <h1 class="display-5 fw-bold mb-3">智能仓储管理平台</h1>
            <p class="lead mb-0">数据驱动决策，智能优化仓储</p>
        </div>

        <div class="row g-4">
            <!-- 收发存报表 -->
            <div class="col-12 col-md-6 col-lg-3">
                <div class="feature-card card h-100 shadow-sm">
                    <div class="card-body d-flex flex-column justify-content-between p-4">
                        <div>
                            <div class="feature-icon">
                                <i class="bi bi-file-earmark-bar-graph fs-3 text-primary"></i>
                            </div>
                            <h3 class="h5 fw-bold mb-3">收发存报表</h3>
                            <p class="text-muted">上传分析WMS/ERP系统数据，生成智能分析报告</p>
                        </div>
                        <a href="/upload/" class="btn btn-primary w-100">开始分析</a>
                    </div>
                </div>
            </div>

            <!-- 移动日志分析 -->
            <div class="col-12 col-md-6 col-lg-3">
                <div class="feature-card card h-100 shadow-sm">
                    <div class="card-body d-flex flex-column justify-content-between p-4">
                        <div>
                            <div class="feature-icon">
                                <i class="bi bi-clock-history fs-3 text-success"></i>
                            </div>
                            <h3 class="h5 fw-bold mb-3">移动日志分析</h3>
                            <p class="text-muted">处理仓储移动日志，生成可视化分析报告</p>
                        </div>
                        <a href="/movelog/" class="btn btn-success w-100">开始分析</a>
                    </div>
                </div>
            </div>

            <!-- 出库运单分析 -->
            <div class="col-12 col-md-6 col-lg-3">
                <div class="feature-card card h-100 shadow-sm">
                    <div class="card-body d-flex flex-column justify-content-between p-4">
                        <div>
                            <div class="feature-icon">
                                <i class="bi bi-truck fs-3 text-warning"></i>
                            </div>
                            <h3 class="h5 fw-bold mb-3">出库运单分析</h3>
                            <p class="text-muted">分析出库单数据，优化物流配送效率</p>
                        </div>
                        <a href="/shipping/" class="btn btn-warning w-100">开始分析</a>
                    </div>
                </div>
            </div>
            <!-- 工厂出库运单分析 -->
            <div class="col-12 col-md-6 col-lg-3">
                <div class="feature-card card h-100 shadow-sm">
                    <div class="card-body d-flex flex-column justify-content-between p-4">
                        <div>
                            <div class="feature-icon">
                                <i class="bi bi-truck fs-3 text-warning"></i>
                            </div>
                            <h3 class="h5 fw-bold mb-3">工厂出库运单分析</h3>
                            <p class="text-muted">工厂出库单数据分析</p>
                        </div>
                        <a href="/factory-shipping/"  class="btn btn-purple w-100" >开始分析</a>
                    </div>
                </div>
            </div>
            <!-- 拣货日志分析 -->
            <div class="col-12 col-md-6 col-lg-3">
                <div class="feature-card card h-100 shadow-sm">
                    <div class="card-body d-flex flex-column justify-content-between p-4">
                        <div>
                            <div class="feature-icon">
                                <i class="bi bi-box-seam fs-3 text-danger"></i>
                            </div>
                            <h3 class="h5 fw-bold mb-3">拣货日志分析</h3>
                            <p class="text-muted">分析拣货日志，优化仓储作业流程</p>
                        </div>
                        <a href="/picking/" class="btn btn-danger w-100">开始分析</a>
                    </div>
                </div>
            </div>
            <!-- 工厂拣货发货类型分析 -->
            <div class="col-12 col-md-6 col-lg-3">
                <div class="feature-card card h-100 shadow-sm">
                    <div class="card-body d-flex flex-column justify-content-between p-4">
                        <div>
                            <div class="feature-icon">
                                <i class="bi bi-box-seam fs-3 text-danger"></i>
                            </div>
                            <h3 class="h5 fw-bold mb-3">工厂发货类型分析</h3>
                            <p class="text-muted">有码无码发货分析</p>
                        </div>
                        <a href="/factory-picking/upload/" class="btn btn-danger w-100">开始分析</a>
                    </div>
                </div>
            </div>
            <!-- 库存日志分析 -->
            <div class="col-12 col-md-6 col-lg-3">
                <div class="feature-card card h-100 shadow-sm">
                    <div class="card-body d-flex flex-column justify-content-between p-4">
                        <div>
                            <div class="feature-icon">
                                <i class="bi bi-box-seam fs-3 text-danger"></i>
                            </div>
                            <h3 class="h5 fw-bold mb-3">库存分析</h3>
                            <p class="text-muted">分析库存，优化仓储作业流程</p>
                        </div>
                        <a href="/stock/" class="btn btn-danger w-100">开始分析</a>
                    </div>
                </div>
            </div>
            <!-- 生产工单采集分析 -->
            <div class="col-12 col-md-6 col-lg-3">
                <div class="feature-card card h-100 shadow-sm">
                    <div class="card-body d-flex flex-column justify-content-between p-4">
                        <div>
                            <div class="feature-icon">
                                <i class="bi bi-box-seam fs-3 text-danger"></i>
                            </div>
                            <h3 class="h5 fw-bold mb-3">生产工单采集分析</h3>
                            <p class="text-muted">分析库存，优化仓储作业流程</p>
                        </div>
                        <a href="/production_order_analysis/upload/" class="btn btn-danger w-100">开始分析</a>
                    </div>
                </div>
            </div>
            <!-- 工厂酒领分析 -->
            <div class="col-12 col-md-6 col-lg-3">
                <div class="feature-card card h-100 shadow-sm">
                    <div class="card-body d-flex flex-column justify-content-between p-4">
                        <div>
                            <div class="feature-icon">
                                <i class="bi bi-box-seam fs-3 text-danger"></i>
                            </div>
                            <h3 class="h5 fw-bold mb-3">工厂酒领采集分析</h3>
                            <p class="text-muted">分析库存，优化仓储作业流程</p>
                        </div>
                        <a href="/analyze_aging/upload/" class="btn btn-danger w-100">开始分析</a>
                    </div>
                </div>
            </div>
            <!-- 二厂包材大屏 -->
            <div class="col-12 col-md-6 col-lg-3">
                <div class="feature-card card h-100 shadow-sm">
                    <div class="card-body d-flex flex-column justify-content-between p-4">
                        <div>
                            <div class="feature-icon">
                                <i class="bi bi-box-seam fs-3 text-danger"></i>
                            </div>
                            <h3 class="h5 fw-bold mb-3">二厂包材大屏</h3>
                            <p class="text-muted">大屏显示</p>
                        </div>
                        <a href="/factory_screen/upload/" class="btn btn-danger w-100">开始分析</a>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <footer class="bg-dark text-white mt-5">
        <div class="container py-4">
            <div class="row align-items-center">
                <div class="col-md-6 text-center text-md-start">
                    <img src="{% static 'img/小房子.png' %}" width="30" height="30" class="me-2">
                    <span class="small">© 2025 仓储管理系统</span>
                </div>
                <div class="col-md-6 text-center text-md-end mt-3 mt-md-0">
                    <p class="small mb-0">技术支持：数据智能中心</p>
                </div>
            </div>
        </div>
    </footer>

    <!-- Bootstrap 5 JS -->
    <script src="{% static 'plugins/bootstrap-5.3.0-alpha1-dist/js/bootstrap.bundle.min.js' %}"></script>
</body>
</html>